import { ConfigProvider } from 'antd';
import ReactDOM from 'react-dom';
import zh_CN from 'antd/es/locale/zh_CN';
import { BrowserRouter, Route, Router, Routes, Navigate } from 'react-router-dom';

import MainLayout from './App'
// import MainLayout from './layout/MainLayout';
import Login from './pages/login';
import RcMp from './pages/internal/mp';
import MockVideo from './pages/internal/mock/video';
import QuickCode from './pages/quick-code';
import lazyload from './utils/lazyload';
import Home from './pages/home/index'
import React from 'react';
import { routes } from './routes';
window.React = React
function getFlattenRoutes(routes: any[]) {
  const res: any[] = [];
  function travel(_routes: any[]) {
    _routes.forEach((route) => {
      const visibleChildren = (route.children || []).filter(
        (child: { ignore: any; }) => !child.ignore
      );
      if (route.path && (!route.children || !visibleChildren.length)) {
        try {

          // @ts-ignore
          route.component = lazyload(() => import(`./pages${route.path}`));
          res.push(route);
        } catch (e) {
          console.error('catchcatch', e);
        }
      }
      if (route.children && route.children.length) {
        travel(route.children);
      }
    });
  }
  travel(routes);
  return res;
}
if ((window as any).cdnUrl) {
  //   @ts-ignore
  __webpack_public_path__ = window.cdnUrl
} else {
  //   @ts-ignore

  __webpack_public_path__ = '/'
}
const _routes = getFlattenRoutes(routes)
console.log({ _routes })
ReactDOM.render(

  <ConfigProvider
    locale={zh_CN}

  >
    <BrowserRouter >

      {/* <Router navigator={history} location={location}> */}


      <Routes >
        <Route path="/login" element={<Login />} />
        <Route path="/internal/mp" element={<RcMp />} />
        <Route path="/internal/mock/video" element={<MockVideo />} />
        <Route path="/quick-code" element={<QuickCode />} />
        <Route path='/' element={<Home />} />
        <Route path='/workbench/*' element={<MainLayout />}>
          <Route path='' element={<Navigate to="/workbench/dashboard/workplace" />} />

          {_routes.map(item => {
            const Rc = item.component

            return <Route key={item.path} path={item.path.replace('/workbench/', '')} element={<Rc />}>

            </Route>

          })
          }
        </Route>
        {/*     
        </Route>

        <Route exact path="/stars" component={lazyload(() => import('./pages/stars/index'))}>
        </Route>
      
        <Route path="/workbench*" component={Workbench} />

        <Route exact path="*" component={lazyload(() => import('./pages/exception/404'))}>
        </Route>  */}




      </Routes>

      {/* </Router> */}
    </BrowserRouter>
  </ConfigProvider>

  , document.getElementById('root'));